<!DOCTYPE html>
<html>
<head>
    <title>爬取文章专栏</title>
    <link rel="stylesheet" th:href="@{/css/sidebar.css}" />
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex; /* 使用 flex 布局 */
        }

        #content-container {
            flex: 1;
            margin-left: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        button {
            padding: 5px 10px;
        }

        #header {
            display: flex;
            align-items: center;
        }

        #header h1 {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div th:replace="sidebar.html :: sidebar"></div>
<div id="content-container">
    <div id="header">
        <h1>爬取文章</h1>
<!--        <button onclick="downloadColumn()">下载专栏</button>-->
    </div>

    <form id="crawlForm">
        <label for="columnUrl">请输入专栏首页链接：</label>
        <input type="text" id="columnUrl" name="columnUrl" required>
        <button type="submit">确定</button>
    </form>

    <h2 id="title"></h2>
    <h3 id="website"></h3>
    <table id="articlesTable">
        <tr>
            <th>Title</th>
            <th>Action</th>
        </tr>
    </table>

</div>
<script>
    // 定义数据对象
    var columnData = {
        title: '',
        website: '',
        articleLinkDTOList: [],
        columnUrl: ''
    };

    document.getElementById('crawlForm').addEventListener('submit', function(e) {
        e.preventDefault();
        var columnUrl = document.getElementById('columnUrl').value;
        crawlArticles(columnUrl);
    });

    function crawlArticles(columnUrl) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:9001/crawl/crawlArticlesOfColumn', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);

                // 存储数据到数据对象
                columnData.title = response.data.title;
                columnData.website = response.data.website;
                columnData.articleLinkDTOList = response.data.articleColumnDTO.articleLinkDTOList;
                columnData.columnUrl = columnUrl

                displayArticles(response.data);
            }
        };
        xhr.send(JSON.stringify({ columnUrl: columnUrl }));
    }

    function displayArticles(data) {
        document.getElementById('title').textContent = data.title;
        document.getElementById('website').textContent = data.website;

        var articlesTable = document.getElementById('articlesTable');
        var articleLinkDTOList = data.articleColumnDTO.articleLinkDTOList;

        articleLinkDTOList.forEach(function(article) {
            var row = articlesTable.insertRow();
            var titleCell = row.insertCell(0);
            var buttonCell = row.insertCell(1);
            titleCell.textContent = article.title;

            var button = document.createElement('button');
            button.textContent = '爬取';
            button.addEventListener('click', function() {
                crawlArticle(data.website, data.title, article.url);
            });

            buttonCell.appendChild(button);
        });
    }

    function crawlArticle(website, columnTitle, articleUrl) {
        // 在这里编写爬取文章的逻辑
        var params = {
            website: website,
            columnTitle: columnTitle,
            articleUrl: articleUrl
        };

        var url = '/index/crawlArticle?' + new URLSearchParams(params).toString();
        window.location.href = url;
    }

    // function downloadColumn() {
    //     var requestData = columnData;
    //
    //     var xhr = new XMLHttpRequest();
    //     xhr.open('POST', 'http://localhost:9001/reptile/downloadColumn', true);
    //     xhr.setRequestHeader('Content-Type', 'application/json');
    //     xhr.responseType = 'blob'; // 设置响应类型为二进制数据，以便接收文件
    //     xhr.onreadystatechange = function() {
    //         if (xhr.readyState === 4 && xhr.status === 200) {
    //             // 创建一个临时的下载链接
    //             var downloadLink = document.createElement('a');
    //             downloadLink.href = window.URL.createObjectURL(xhr.response);
    //             downloadLink.download = title + '.pdf'; // 设置文件名
    //             downloadLink.click();
    //         }
    //     };
    //     xhr.send(JSON.stringify(requestData));
    // }

</script>
</body>
</html>